<template>
  <!-- 撤回 -->
  <a-modal
    :width="500"
    :visible="withdrawalVisible"
    @ok="handleWithdrawalSubmit"
    @cancel="handleWithdrawalClose"
    cancelText="关闭"
    title="撤回工单"
  >
    <a-spin :spinning="confirmLoading">
      <a-form layout="horizontal">
        <a-row :gutter="24">
          <a-col>
            <a-form-model-item
              label="撤回原因："
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 16 }"
              prop="withdrawalReason"
              :rules="$valid.required"
            >
              <a-select
                v-model="withdrawal.withdrawalReason"
                placeholder="请选择撤回原因"
                @change="forceUpdate"
              >
                <a-select-option
                  v-for="item in this.$sysDictOptions('withdrawalReason')"
                  :key="item.k"
                  :value="item.k"
                >
                  {{ item.v }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col>
            <a-form-model-item
              label="备注："
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 16 }"
              prop="withdrawalRemarks"
            >
              <a-input v-model="withdrawal.withdrawalRemarks" type="textarea" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import moment from 'moment'
import { postAction } from '@/api/manage'
import WImageUpload from '@/components/WxImageUpload/WImageUpload'
import WFileUpload from '@/components/WxFileUpload/WFileUpload.vue'

export default {
  name: 'DispatchForm',
  components: {
    WImageUpload,
    WFileUpload,
  },
  computed: {},
  data() {
    return {
      confirmLoading: false,
      withdrawalVisible: false,
      withdrawal: {
        ids: undefined,
        withdrawalReason: undefined,
        withdrawalRemarks: undefined,
      },

      current: 0,
      url: {
        update: '/system/devMaintenance/update',
      },
    }
  },
  created() {},
  methods: {
    forceUpdate() {
      this.$forceUpdate()
    },
    moment,

    //START 撤回
    handleWithdrawal(id) {
      this.withdrawalVisible = true
      this.withdrawal = {}
      this.withdrawal.ids = id
    },

    handleWithdrawalSubmit() {
      if (!this.withdrawal.withdrawalReason) {
        this.$message.error('请选择撤回原因')
        return
      }
      this.withdrawalVisible = true
      this.withdrawal.workOrderStatus = '6'
      postAction(this.url.update, this.withdrawal).then((resp) => {
        this.$message.success('工单撤回成功')
        this.handleWithdrawalClose()
      })
    },
    handleWithdrawalClose() {
      this.withdrawalVisible = false
      this.withdrawal = {}
      this.$emit('close')
    },

    //END 撤回
  },
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Microsoft YaHei', sans-serif;
  background-color: #f0f2f5;
  color: #333;
  padding: 20px;
}
</style>
